<template>
    <div class="move-container">
        <div class="div1">{{text1}}</div>
        <svg style="transform: rotate(-217deg)" :width="width" :height="width" xmlns="http://www.w3.org/2000/svg" class="jindu">
            <circle :r="(width-radius)/2"
                :cy="width/2"
                :cx="width/2"
                :stroke-width="radius"
                :stroke="backgroundColor"
                fill="none"
            />
            <circle ref="$bar"
                :r="(width-radius)/2"
                :cy="width/2"
                :cx="width/2"
                :stroke="barColor"
                :stroke-width="radius"
                :stroke-linecap="isRound ? 'round' : 'square'"
                :stroke-dasharray="(width-radius)*3.14"
                :stroke-dashoffset="isAnimation ? (width-radius) * 3.14 : (width - radius) * 3.14 * (100 - progress) / 100"
                fill="none"
            />
        </svg>
        <div class="time1">{{text2}}</div>
        <div class="time2">{{text3}}</div>
        <div class="time3">{{text4}}</div>
        <div class="move-right">
            <router-link to="/">
                <i class="iconfont">&#xe64e;</i>
            </router-link>
        </div>
        <div class="move-div1">
            <p class="p1">{{text5}}</p>
            <p class="p2">{{text6}}</p>
        </div>
        <div class="move-div2">
            <p class="p1">{{text7}}</p>
            <p class="p2">{{text8}}</p>
        </div>
    </div>
</template>
<script>
export default {
    name:'MoveContainer',
    props: {
        width: [Number, String], // 圆的大小
        radius: [Number, String], // 进度条厚度
        progress: [Number, String], // 进度条百分比
        barColor: String, // 进度条颜色
        backgroundColor: String, // 背景颜色
        isAnimation: { // 是否是动画效果
            type: Boolean,
            default: true,
        },
        isRound: { // 是否是圆形画笔
            type: Boolean,
            default: true,
        },
        id: { // 组件的id，多组件共存时使用
            type: [String, Number],
            default: 1,
        },
        duration: { // 整个动画时长
            type: [String, Number],
            default: 1000,
        },
        delay: { // 延迟多久执行
            type: [String, Number],
            default: 200,
        },
        timeFunction: { // 动画缓动函数
            type: String,
            default: 'cubic-bezier(0.99, 0.01, 0.22, 0.94)'
        },
        text1:{
            type:String,
            default:"运动"
        },
        text2:{
            type:[Number,String],
            default:2034
        },
        text3:{
            type:String,
            default:"分"
        },
        text4:{
            type:String,
            default:"打卡"
        },
        text5:{
            type:String,
            default:"本周运动"
        },
        text6:{
            type:[Number,String],
            default:20
        },
        text7:{
            type:String,
            default:"本周好友运动"
        },
        text8:{
            type:[Number,String],
            default:20
        }
    },
    data() {
        return {
        idStr: `circle_progress_keyframes_${this.id}`
        }
    },
    beforeDestroy() {
        // 清除旧组件的样式标签
        document.getElementById(this.idStr) && document.getElementById(this.idStr).remove()
    },
    mounted() {
        if (this.isAnimation) {
        // 重复定义判断
        if (document.getElementById(this.idStr)) {
            console.warn('vue-circle-progress should not have same id style')
            document.getElementById(this.idStr).remove()
        }
        // 生成动画样式文件
        let style = document.createElement('style')
        style.id = this.idStr
        style.type = 'text/css'
        style.innerHTML = `
        @keyframes circle_progress_keyframes_name_${this.id} {
        from {stroke-dashoffset: ${(this.width - this.radius) * 3.14}px;}
        to {stroke-dashoffset: ${(this.width - this.radius) * 3.14 * (100 - this.progress) / 100}px;}}
        .circle_progress_bar${this.id} {animation: circle_progress_keyframes_name_${this.id} ${this.duration}ms ${this.delay}ms ${this.timeFunction} forwards;}`
        // 添加新样式文件
        document.getElementsByTagName('head')[0].appendChild(style)
        // 往svg元素中添加动画class
        this.$refs.$bar.classList.add(`circle_progress_bar${this.id}`)
        }
    }
}
</script>
<style lang="less" scoped>
.move-container{
    width: 100%;
    height: 300px;
    overflow: hidden;
    background-color: #fff;
    position: relative;
    .div1{
        margin-top:25px;
        margin-left: 20px;
        font-size: 18px;
        color:#171818;
        font-weight: 700;
        float: left;
    }
    .jindu{
        float: left;
        margin-left: 30px;
        margin-top: 30px;
    }
    .time1{
        position: absolute;
        top:80px;
        left:50%;
        margin-left: -20px;
        font-size: 35px;
        font-weight: 700;
        color:#171818;
    }
    .time2{
        position: absolute;
        top:125px;
        left:50%;
        margin-left: -8px;
        font-size: 25px;
        font-weight: 500;
        color:#171818;
    }
    .time3{
        position: absolute;
        top:180px;
        left:50%;
        margin-left: -25px;
        font-size: 20px;
        font-weight: 400;
        color:#171818;
    }
    .move-right{
        float: right;
        margin-top:25px;
        margin-right: 20px;
        font-size: 18px;
        color:#171818;
        font-weight: 700;
    }
    .move-div1{
        float: left;
        margin-left: 40px;
        font-size: 16px;
        letter-spacing: 1px;
        color:#171818;
        .p2{
            text-align: center;
            font-size: 24px;
            font-weight: 700;
            color: #171818;
            margin-top: 6px;
        }
    }
    .move-div2{
        float: left;
        margin-left: 40px;
        font-size: 16px;
        letter-spacing: 1px;
        color:#171818;
        .p2{
            text-align: center;
            font-size: 24px;
            font-weight: 700;
            color: #171818;
            margin-top: 6px;
        }
    }
}
</style>